| 【重学ES6】常见ES6特性速览 | 您所在的位置：网站首页 › es6 面试 › 【重学ES6】常见ES6特性速览 |
【重学ES6】常见ES6特性速览
|
1.let关键字
let用于声明变量，可以声明一个或多个变量 let声明的变量就是块级作用域，简单来说就是：只在花括号包起来的代码块里面生效， console.log会报错。 当然，块级作用域不是只有花括号这么一种简单的情形，在if、else、while、for循环等语句的花括号中使用let，都是块级作用域。 3.不存在变量提升所谓变量提升就是，如果变量在声明之前就被使用，是不报错的，因为声明变量的语句执行顺序会提前 这段的代码输出的结果是undefined，不是报错，它的真实执行顺序是： var song console.log（song） song = '恋爱达人' 复制代码上述例子是用var声明变量，存在变量提升。如果使用let声明变量，就不逊在变量提升，就会报错 。 4.不影响作用域链在块级作用域中let声明变量和函数，函数内部没有school变量，调用函数，函数仍可以用作用域链的规则向上查找，并且使用到school，这证明了作用域链条没有受到影响。 2.const关键字const用来声明常量，使用时一般有如下如则： 1.声明时要赋值 2.常量一般要大写（潜规则） 3.常量的值不能修改 4.有块级作用域 5.const声明的数组、对象，如果修改了里面的元素，那么不会报错 因为const声明的变量里面存储的是地址，修改了数组、对象里面的具体数据，但是地址没变，那么就不报错。 3.解构赋值按照一定的规则，从数组或者对象中提取值，然后对变量赋值 数组解构赋值
对象解构赋值
ES5中的字符串用单引号 '' 或者双引号括起来""，ES6提供的模板字符串则是利用反引号 特点 1.声明方式没啥变化 let str = ·这是一个模板字符串· 复制代码2.内容中可以出现换行 3.变量拼接 在模板字符串中使用 ${变量名} 就可以实现变量的拼接 特点： 1.this是静态的this始终指向函数声明时所在作用域下的 this的值 //1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值 function getName(){ console.log(this.name); } let getName2 = () => { console.log(this.name); } //设置 window 对象的 name 属性 window.name = '尚硅谷'; const school = { name: "ATGUIGU" } // call 方法调用 getName.call(school); getName2.call(school); 复制代码结果： 用call改变箭头函数的this，发现没有改变，它的this依然是声明时所指向的。 2.箭头函数不能实例化对象3.剪头函数不能使用arguments 在函数中，有一个arguments对象，这是一个类数组对象它包含着调用函数时传入的所有参数，但是在箭头函数中没有arguments。 6.rest参数ES6引入 rest参数，用于获取函数的实参，用来代替arguments 打印结果，得到的是一个数组，下一步可以方便地使用数组的api 另外有一个注意事项，rest参数必须放在最后一个 symbol是一种原始数据类型，他表示独一无二的值，主要特点有以下几个 1.Symbol的值是唯一的，用来解决命名冲突的问题 2.Symbol值不能与其他数据进行运算 3.Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用 Reflect.ownKeys来获取对象的所有键名 创建symbol有两个方式 symbol的具体使用，主要是向对象中添加属性和方法 8.迭代器迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作。| ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费 迭代器的工作原理大概是这样的： 迭代器常用于自定义遍历数据，例如，有一个对象如下： const banji = { name: "终极一班", stus: [ 'xiaoming', 'xiaoning', 'xiaotian', 'knight' ], } 复制代码我们想要用for ...of的方式来遍历这个对象里面的stus数组，但是banji自己是一个对象，无法使用for...of遍历，即便能遍历，除了stus，还有一个name需要规避掉，这个情况下，就需要用到迭代器进行自定义设置。代码如下： //声明一个对象 const banji = { name: "终极一班", stus: [ 'xiaoming', 'xiaoning', 'xiaotian', 'knight' ], [Symbol.iterator]() { //索引变量 let index = 0; // let _this = this; return { next: function () { if (index < _this.stus.length) { const result = { value: _this.stus[index], done: false }; //下标自增 index++; //返回结果 return result; }else{ return {value: undefined, done: true}; } } }; } } //遍历这个对象 for (let v of banji) { console.log(v); } 复制代码通过设置，可以在循环遍历的时候，按照我们的意愿去实现。 9.生成器生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。 生成器就是一个特殊的函数，主要用来异步编程。 10 set（集合）set是一种新的数据结构，类似于数组，但是它成员的值都是唯一的。一般会传入一个可迭代的参数，并且会自动去重。 集合实现了iterator接口，所以可以使用『扩展运算符』和『for ...of...』进行遍历。 声明set 传入含有重复数据的数组 打印结果，自动去掉重复的 set还有若干方法可以使用 set的一些方便用法 数组去重两个数组的交集，每个数组都用set去重一次 var arr1 = [1,2,3,3,4,5,5,5,7,8] var arr2 = [2,3,4,4,6] // 求L两个数组的交集 let result = [...new Set(arr1)].filter(item =>{ let ar2 = new Set(arr2) if(ar2.has(item)){ return true }else{ return false } }) console.log(result); 复制代码当然也可以采用简写形式 let result1 = [...new Set(arr1)].filter(item => new Set(arr2).has(item)) console.log(result1); 复制代码 求并集ES6提供了Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，所以可以使用「扩展运算符』和『for ....f...』进行遍历。Map的属性和方法: |
【本文地址】